<template>
  <div class="main">
    <div class="head-father">
        <ul class="head">
        <li
          v-for="(x, index) in list"
          :key="x.id"
          :class="[index == current ? 'active' : '']"
          @click="handler(x, index)"
        >
          {{ x.name }}
        </li>
      </ul>
      </div>
      <ul class="body">
        <li v-for = "(x,index) in list2" :key="x.uniquekey" @click="show(index)">
          <p>{{x.title}}</p>
          文章来自：<span>{{x.category}}</span>
        </li>
      </ul>
  </div>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      list: [
        { id: 1, name: "国内", type: "guonei" },
        { id: 2, name: "国际", type: "guoji" },
        { id: 3, name: "娱乐", type: "yule" },
        { id: 4, name: "体育", type: "tiyu" },
        { id: 5, name: "军事", type: "junshi" },
      ],
      list2: [
        
      ],
      current: 0,
    };
  },
  mounted() {
    this.get()
  },
  methods: {
    handler(x, index) {
      this.current = index;
      this.get(x)
    },
    get(x = { type: "guonei" }) {
      this.$axios
        .post("/data", {
          params: {
            key: "c33112a5316e9121e1826b3b0f8eb7e1",
            type: x.type,
          },
        })
        .then( (res) => {
          this.list2 = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    show(index){
      let key = this.list2[index].uniquekey
      // this.$router.push({name:"BookInfo",params:{ uniquekey: `${key}` }})
      this.$router.push({path:`/bookInfo/${key}`})
     
    }
  },
};
</script>
<style lang="scss" scoped>
.main{
  padding-top: 1px;
  background-color: rgb(214, 212, 212);
}
ul,li{
  list-style: none;
}
ul{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.head-father{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.head {
  background-color: #fff;
  height: 5rem;
  display: flex;
  padding: 1.5rem 0;
  justify-content: space-around;
  border-bottom: 0.1rem solid red;
}
.head > li {
  font-size: 1.5rem;
  height: 2rem;
}
.active {
  color: red;
  border-bottom: 0.1rem solid red;
}
.body{
  background-color: #fff;
  margin-top: 6rem;
}
.body p{
  
  font-size: 2.5rem
}
.body>li{
  border-bottom: 0.1rem solid #ccc;
}

</style>